// hooks只能使用在函数式组件中
// useState hook 用于定义函数式组件状态
import {useState} from 'react';
function StateHooks(){
    console.log("组件加载")
    // 定义状态 返回值为一个数组 数组中得第一个元素为初始化状态数据 第二元素 用来更改状态得函数
    let [num,setNum] = useState(0);
    let [str,setStr] = useState("好好学习天天向上");
    let [user,setUser] = useState({
        name:"张三",
        age:18
    })
    let [list,setList] = useState(["张飞","大桥",'小乔','周郎'])
    // useState做了什么？
    // 手动实现一个useState()?
    console.log(num)
    function add(){
        setNum((num)=>num+1);
        setNum((num)=>num+1);
        setNum((num)=>num+1);
        setStr("哈哈哈哈")
    }
    return (
        <div>
            <h2>useState-hooks</h2>
            <h3>{num}</h3>
            <button onClick={add}>++</button>
            <h3>{str}</h3>
            <button onClick={()=>{
                setStr(()=>{
                    return "学个毛线"
                })
            }}>改变</button>
            <h3>{user.age}----{user.name}</h3>
            <button onClick={()=>{
                // user.name='李四';
                // user.age=20;
                // setUser(user);
                // 注意：改变引用数据类型时必须要先进行深拷贝在更新；
                let newUser = {...user};
                newUser.age = 20;
                newUser.name='李四';
                setUser(newUser)
            }}>改变</button>
            {
                list.map(item=>{
                    return <div key={item}>{item}</div>
                })
            }
            <button onClick={()=>{
                let newList = [...list];
                newList.push("刘备");
                setList(newList)
            }}>add</button>
        </div>
    )
}
/* 
useState特点:
1. 多个更新 会合并更接近
2. 更新函数得参数可以是一个直接最新值也可以是一个回调函数
3. 状态更新时是一个异步得过程。

*/
export default StateHooks;